<template>
  <div class="wrapper">
    <div class="main">
      <div class="left">
        <span>CRMEB</span>
        <span>商业版</span>
        <p>自己的，才是最好的</p>
        <p>每个企业都应该有属于自己的CRMEB系统</p>
      </div>
      <div class="right">
        <img
          src="https://woniuxy.com/static/images/logo-500px.png"
          alt=""
          width="100"
        />
        <div class="demo-input-suffix">
          <el-input
            placeholder="请输入账号"
            prefix-icon="el-icon-search"
            v-model="input2"
          >
          </el-input>
        </div>
        <div class="demo-input-suffix">
          <el-input placeholder="请输入密码" v-model="input4">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </div>
        <div class="draw">
          <input type="text" v-model="val" />
          <Canvas @code="code"></Canvas>
        </div>

        <button @click="submit">登录</button>
      </div>
    </div>
  </div>
</template>

<script>
import Canvas from "../components/Canvas.vue";
export default {
  components: {
    Canvas,
  },
  data() {
    return {
      input2: "",
      input4: "",
      sureCode: null,
      val: null,
    };
  },
  methods: {
    code(data) {
      this.sureCode = data;
    },
    async submit() {
      if (this.val && this.val.toUpperCase() == this.sureCode.toUpperCase()) {
        let obj = {
          account: this.input2,
          password: this.input4,
        };
        let { data: res } = await this.$http.user.login(obj);
        
        if (res.code == 200) {
          localStorage.setItem("token", res.token);
          localStorage.setItem("username", this.input2);
          let {data}=await this.$http.user.getUserInfo()
          
          localStorage.setItem('userInfo',JSON.stringify(data.userInfo))
          this.$message({
            message: "登录成功",
            type: "success",
          });
          this.$router.replace({ path: "/home/" });
        }else{
          this.$message({
          message: "登录失败",
          type: "error",
        });
        }
      } else {
        this.$message({
          message: "验证码不正确",
          type: "error",
        });
      }
    },
  },
};
</script>

<style lang='scss' scoped>
.wrapper {
  width: 100%;
  height: 100vh;
  background: url("https://img.zcool.cn/community/0385d6b5affd021a801218cf4b4a509.jpg");
  display: flex;
  justify-content: center;
  align-items: center;
  .main {
    width: 800px;
    height: 400px;
    background-color: red;
    display: flex;
    .left {
      height: 100%;
      width: 60%;
      padding: 20px 0 0 20px;
      box-sizing: border-box;
      color: white;
      span:nth-of-type(2) {
        display: inline-block;
        border: 1px solid white;
        margin-left: 5px;
        padding: 2px;
        box-sizing: border-box;
      }
    }
    .right {
      width: 40%;
      height: 100%;
      background-color: rgb(87, 114, 23);
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
      .draw {
        width: 100%;
        display: flex;
        justify-content: center;
        input {
          width: 30%;
          margin-right: 5px;
          outline: none;
        }
      }
      button {
        width: 80%;
        height: 30px;
        background-color: blue;
        color: white;
        border: none;
      }
    }
  }
}
</style>